<template>
  <el-card class="sales">
    <div slot="header" class="sales-header">
      <el-tabs class="sales-tab" v-model="tabName">
        <el-tab-pane label="销售额" name="sale"></el-tab-pane>
        <el-tab-pane label="访问量" name="visit"></el-tab-pane>
      </el-tabs>
      <div class="sales-date">
        <span @click="setToday">今日</span>
        <span @click="setWeek">本周</span>
        <span @click="setMonth">本月</span>
        <span @click="setYear">本年</span>
        <el-date-picker
          type="daterange"
          range-separator="--"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          v-model="date"
          size="mini"
        >
        </el-date-picker>
      </div>
    </div>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12" :md="12" :lg="18">
        <div class="charts" ref="charts"></div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <div class="sale-rank">
          <p class="sale-rank-title">门店销售额排名</p>
          <ul class="sale-rank-list">
            <li
              v-for="(rank, index) in tabName === 'sale' ? orderRank : userRank"
              :key="rank.no"
            >
              <span :class="{ active: index < 3 }">{{ rank.no }}</span>
              <span>{{ rank.name }} </span>
              <span>{{ rank.money }}</span>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import resize from '@/mixins/resize'
import { mapState } from 'vuex'
export default {
  name: 'Sales',
  data() {
    return {
      tabName: 'sale',
      date: ''
    }
  },
  mounted() {
    this.myEcharts = echarts.init(this.$refs.charts)
    this.myEcharts.setOption({
      title: {
        text: `${this.title}趋势`,
        textStyle: {
          fontStyle: 'normal',
          fontSize: 14
        },
        left: 50
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            width: 50,
            type: 'solid',
            color: 'rgba(0,0,0,.3)'
          }
        }
      },
      xAxis: {
        type: 'category',
        axisTick: {
          alignWithLabel: true
        },
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月'
        ]
      },
      yAxis: {
        type: 'value'
      },
      grid: {
        left: '2%',
        right: '3%',
        top: '10%',
        containLabel: true
      },
      series: {
        type: 'bar',
        name: '销售额',
        barWidth: 30,
        data: [10, 52, 200, 334, 390, 330, 220, 52, 200, 334, 390, 123]
      }
    })
  },

  computed: {
    ...mapState({
      orderFullYearAxis: state => state.home.homeData.orderFullYearAxis,
      orderFullYear: state => state.home.homeData.orderFullYear,
      userFullYearAxis: state => state.home.homeData.userFullYearAxis,
      userFullYear: state => state.home.homeData.userFullYear,
      orderRank: state => state.home.homeData.orderRank,
      userRank: state => state.home.homeData.userRank
    }),
    title() {
      return this.tabName === 'sale' ? '销售额' : '访问量'
    }
  },
  watch: {
    title: {
      handler(val) {
        this.myEcharts.setOption({
          title: {
            text: `${val}趋势`
          },
          xAxis: {
            data:
              this.tabName === 'sale'
                ? this.orderFullYearAxis
                : this.userFullYearAxis
          },
          series: {
            data:
              this.tabName === 'sale' ? this.orderFullYear : this.userFullYear,
            name: val
          }
        })
      }
    }
  },
  methods: {
    setToday() {
      const start = dayjs().format('YYYY-MM-DD')
      const end = dayjs().format('YYYY-MM-DD')
      this.date = [start, end]
    },
    setWeek() {
      const start = dayjs()
        .day(1)
        .format('YYYY-MM-DD')
      const end = dayjs()
        .day(7)
        .format('YYYY-MM-DD')
      this.date = [start, end]
    },
    setMonth() {
      const start = dayjs()
        .startOf('month')
        .format('YYYY-MM-DD')
      const end = dayjs()
        .endOf('month')
        .format('YYYY-MM-DD')
      this.date = [start, end]
    },
    setYear() {
      const start = dayjs()
        .startOf('year')
        .format('YYYY-MM-DD')
      const end = dayjs()
        .endOf('year')
        .format('YYYY-MM-DD')
      this.date = [start, end]
    }
  },
  mixins: [resize]
}
</script>

<style lang="sass" scoped>
.sales
  margin: 10px 0
.charts
  width: 100%
  height: 500px
.sales-header
  display: flex
  justify-content: space-between

.sales-date
  span
    margin-right: 20px
    color: #519EFF


.sale-rank-title
  font-weight: bold

.sale-rank-list
  padding: 0
  li
    display: flex
    justify-content: space-between
    align-items: center
    margin-top: 20px
    span:first-child
      width: 20px
      height: 20px
      line-height: 20px
      text-align: center
      &.active
        background-color: #E62E59
        color: #fff
        border-radius: 50%
</style>
